.loader {
  width: 160px;
  height: 185px;
  position: absolute;
  background:gainsboro;
  border-radius: 100px 100px 0 0;
}



.loader:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 125px;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  background-image: radial-gradient(circle, #000 48%, transparent 55%),
    radial-gradient(circle, #000 48%, transparent 55%),
    radial-gradient(circle, #fff 30%, transparent 45%),
    radial-gradient(circle, #000 48%, transparent 51%),
    linear-gradient(#000 20px, transparent 0),
    linear-gradient(#cfecf9 60px, transparent 0),
    radial-gradient(circle, #cfecf9 50%, transparent 51%),
    radial-gradient(circle, #cfecf9 50%, transparent 51%);
  background-repeat: no-repeat;
  background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px,
    50px 25px, 70px 70px, 70px 70px;
  background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px,
    50% 50px, 50% 22px, 50% 45px;
  animation: faceLift 2s linear infinite alternate;
}
.loader:before {
  content: "";
  position: absolute;
  width: 140%;
  height: 125px;
  left: -20%;
  top: 0;
  background-image: radial-gradient(circle,gainsboro 48%, transparent 50%),
    radial-gradient(circle, gainsboro 48%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 65px 65px;
  background-position: 0px 12px, 145px 12px;
  animation: earLift 2s linear infinite alternate;
}

@keyframes faceLift {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(-30%);
  }
}
@keyframes earLift {
  0% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}


/*小熊的位置*/
.loader {
  position: fixed;  /* 固定位置 */
  top: 20px;       /* 距离顶部距离 */
  right: 20px;     /* 距离右侧距离 */
  transform: scale(0.5);  /* 缩小到原来的50% */
  transform-origin: top right;  /* 从右上角开始变换 */
  z-index: 1000;   /* 确保显示在其他元素上层 */
}